<template>
	<div class="app-container">
		<!--<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-center">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<jk-search-input v-model="searchParams.customerName" placeholder="客户名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.productName" placeholder="品种名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					&lt;!&ndash;<jk-search-input v-model="searchParams.code" placeholder="生产订单号" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />&ndash;&gt;
					<jk-search-button class="item-gap" @click="onSearchBtn"></jk-search-button>

					&lt;!&ndash;<jk-more-search @on-confirm="onSearchBtn" @on-reset="onResetSearchBtn">
						<el-row :gutter="16" class="flex-start-center-wrap">
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.batchCode" size="small" placeholder="批号" clearable class="width-100-percent margin-5-0" @on-enter="onSearchBtn"></jk-search-input>
							</el-col>
							<el-col :span="12">
								<jk-search-input v-model="moreSearchParams.plannerName" size="small" placeholder="计划员" clearable class="width-100-percent margin-5-0" @on-enter="onSearchBtn"></jk-search-input>
							</el-col>
							<el-col :span="12">
								<jk-select v-model="moreSearchParams.priorityId" :option-list="priorityList" placeholder="优先级" clearable size="small" class="margin-5-0 width-100-percent"></jk-select>
							</el-col>
							<el-col :span="12">
								<el-date-picker v-model="moreSearchParams.deliveryDateFrom" class="margin-5-0" type="date" align="right" clearable size="small" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="交货开始日期"></el-date-picker>
							</el-col>
							<el-col :span="12">
								<el-date-picker v-model="moreSearchParams.deliveryDateTo" class="margin-5-0" type="date" align="right" clearable size="small" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="交货结束日期"></el-date-picker>
							</el-col>
						</el-row>
					</jk-more-search>&ndash;&gt;
				</div>
			</div>
		</jk-operation-card>-->

		<jk-card>
			<div ref="box1" class="flex-center margin-bottom-10">
				<jk-search-input v-model="searchParams.customerName" placeholder="客户名称" size="large" class="search-bar-item-size3 item-gap" clearable @on-enter="onSearchBtn" />
				<jk-search-input v-model="searchParams.productName" placeholder="品种名称" size="large" class="search-bar-item-size3 item-gap" clearable @on-enter="onSearchBtn" />
				<!--<jk-search-input v-model="searchParams.code" placeholder="生产订单号" size="small" class="search-bar-item-size2 item-gap" clearable @on-enter="onSearchBtn" />-->
				<jk-search-button class="item-gap" size="large" @click="onSearchBtn"></jk-search-button>

				<!--<jk-more-search @on-confirm="onSearchBtn" @on-reset="onResetSearchBtn">
                    <el-row :gutter="16" class="flex-start-center-wrap">
                        <el-col :span="12">
                            <jk-search-input v-model="moreSearchParams.batchCode" size="small" placeholder="批号" clearable class="width-100-percent margin-5-0" @on-enter="onSearchBtn"></jk-search-input>
                        </el-col>
                        <el-col :span="12">
                            <jk-search-input v-model="moreSearchParams.plannerName" size="small" placeholder="计划员" clearable class="width-100-percent margin-5-0" @on-enter="onSearchBtn"></jk-search-input>
                        </el-col>
                        <el-col :span="12">
                            <jk-select v-model="moreSearchParams.priorityId" :option-list="priorityList" placeholder="优先级" clearable size="small" class="margin-5-0 width-100-percent"></jk-select>
                        </el-col>
                        <el-col :span="12">
                            <el-date-picker v-model="moreSearchParams.deliveryDateFrom" class="margin-5-0" type="date" align="right" clearable size="small" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="交货开始日期"></el-date-picker>
                        </el-col>
                        <el-col :span="12">
                            <el-date-picker v-model="moreSearchParams.deliveryDateTo" class="margin-5-0" type="date" align="right" clearable size="small" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="交货结束日期"></el-date-picker>
                        </el-col>
                    </el-row>
                </jk-more-search>-->
			</div>
			<jk-table ref="orderTable" :row-style="rowClassName" border :stripe="false" :loading="tableLoading" :data="tableData" :height="tableHeight / 2" @radio-change="onSelectBtn">
				<vxe-column type="radio" width="70" fixed="left" title="单选" align="center">
					<template #header>
						<el-button type="text" :disabled="!Object.keys(selectItem).length" size="mini" @click="clearRadioRowEvent">取消</el-button>
					</template>
				</vxe-column>
				<vxe-column
					v-for="(item, index) in tableColumnList"
					:key="index"
					:title="item.title"
					:align="item.align"
					:field="item.keyName"
					:sortable="item.sortable"
					:fixed="item.fixed ? item.fixed : ''"
					:min-width="item.minWidth"
					:width="item.width"
				>
					<template slot-scope="scope">
						<span v-if="item.keyName === 'code'">{{ scope.row.code }}</span>
						<div v-else-if="item.keyName === 'customerName'">
							<div :type="scope.row.ifOpen ? 'primary' : 'info'" size="mini" class="flex-start-center">
								<span class="text-ellipsis" style="font-weight: 700;">{{ scope.row.customerName }}</span>
							</div>
							<jk-progress :show-text="false" :text-inside="true" :percentage="scope.row.orderQty ? parseInt(((scope.row.completionQty || 0) / scope.row.orderQty) * 100) : 0"></jk-progress>
						</div>
						<div v-else-if="item.keyName === 'progress'" class="flex-center">{{ scope.row.orderQty ? parseInt(((scope.row.completionQty || 0) / scope.row.orderQty) * 100) : 0 }}%</div>
						<span v-else-if="item.keyName === 'machineNum'">{{ scope.row.productOrderMachineList ? scope.row.productOrderMachineList.length : 0 }}</span>
						<div v-else-if="item.keyName === 'coarseSandList'">
							{{ scope.row.coarseSandList ? scope.row.coarseSandList.filter(x => x.typeName === '粗纱').map(x => x.productName).join(',') : '' }}
						</div>
						<div v-else-if="item.keyName === 'paperTubeList'">
							{{ scope.row.batchList ? scope.row.batchList.map(x => x.paperTubeList.map(k => k.name).join(',')).join(',') : '' }}
						</div>
						<div v-else-if="item.keyName === 'processList'">
							{{ scope.row.processList ? scope.row.processList.find(x => x.processCode === "XS") ? scope.row.processList.find(x => x.processCode === "XS").productOrderMachineList.length : '' : '' }}
						</div>
						<span v-else>{{ scope.row[item.keyName] }}</span>
					</template>
				</vxe-column>
			</jk-table>

			<!-- 分页组件 -->
			<footer ref="box2" class="flex-between-center margin-top-10 margin-bottom-4">
				<el-tag effect="plain">
					<span class="el-icon-bank-card item-gap"></span>
					<span>排产工序</span>
				</el-tag>
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
			<jk-table border :stripe="false" :loading="tableLoading" :data="processData" :height="tableHeight / 2 + 14">
				<vxe-column title="工序" align="center" field="processName" :width="120" />
				<vxe-column title="排产截止日期" align="left" field="subPlanEndDate" :min-width="100" />
				<vxe-column title="排产数量" align="right" field="productionQty" :min-width="100"></vxe-column>
				<vxe-column title="完工数量" align="right" field="completionQty" :min-width="100" />
				<vxe-column title="剩余数量" align="right" field="groupName" :min-width="100">
					<template slot-scope="scope">
						<span>{{ (scope.row.productionQty || 0) - (scope.row.completionQty || 0).toFixed() }}</span>
					</template>
				</vxe-column>
				<vxe-column title="排产机台数" align="right" field="machineQty" :width="120" />
				<vxe-column title="正在开台" align="center" field="shiftName" :width="120">
					<template slot-scope="scope">
						<el-button size="mini" type="default" class="link-style" @click="onDetailBtn(scope)">{{ scope.row.productOrderMachineList ? scope.row.productOrderMachineList.length : 0 }}台</el-button>
					</template>
				</vxe-column>
			</jk-table>
		</jk-card>
		<detail-dialog
			:data-item="dataItem"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import handlerCache from '../../../mixins/handler-cache';
    import { orderPriorityList, orderStateList } from '../../../utils/jk/status-option-list';
    import permissionMixin from '../../../mixins/permission-mixin';
    import { reportProductionOrderTracking } from '../../../api/production/productionMonitor';
    import detailDialog from './detail-dialog';
    import jkProgress from '../../jk-components/jk-progress';
    export default {
        name: 'OrderOpenDetail',
        components: {
            jkProgress,
            detailDialog
        },
        mixins: [calHeight, getMenuColumn, handlerCache, permissionMixin],
        data() {
            return {
                prefix: 'production:prdOrder',
                apiItem: {
                    'page': reportProductionOrderTracking
                },
                detailDialogState: false,
                orderStateList: orderStateList,
                dataItem: {},
                tableLoading: true,
                exportLoading: false,
                tableData: [],
                processData: [],
                searchParams: {
                    count: 0,
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    ifTest: false,
                    code: '',
                    machineNameOrCode: '',
                    customerName: '',
                    productName: '',
                    serviceStates: [0, 1, 2, 3]
                },
                moreSearchParams: {
                    deliveryDateTo: '',
                    deliveryDateFrom: '',
                    priorityId: null,
                    batchCode: '',
                    plannerName: ''
                },
                selectItem: {},
                priorityList: orderPriorityList
            };
        },
        mounted() {
            this.getDependentData();
        },
        methods: {
            clearRadioRowEvent() {
                this.selectItem = {};
                this.processData = [];
                this.$refs.orderTable.$refs.xTable.clearRadioRow();
            },
            onSelectBtn(e) {
                this.selectItem = e.row;
                this.processData = e.row.processList ? e.row.processList.filter(x => x.productOrderMachineList && x.productOrderMachineList.length) : [];
            },
            rowClassName({ row }) {
                if (row.id === this.selectItem.id) {
                    return {
                        color: '#2b85e4',
                        background: '#f0faff'
                    };
                }
            },
            onDetailBtn(scope) {
                this.dataItem = scope.row;
                this.detailDialogState = true;
            },
            onVisibleChangeOfDetailDialog(e) {
                if (!e) {
                    this.dataItem = {};
                }
                this.detailDialogState = e;
            },
            onResetSearchBtn() {
                Object.assign(this.$data.moreSearchParams, this.$options.data().moreSearchParams);
            },
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.getListRequest();
            },
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            onFinish() {
                this.getListRequest();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            async getDependentData() {
                this.tableLoading = true;
                await this.getMenuColumnListRequest();
                await this.getListRequest();
                this.tableLoading = false;
            },
            /** 查询列表 */
            getListRequest() {
                this.tableLoading = true;
                this.selectItem = {};
                const params = { ...this.moreSearchParams, ...this.searchParams };
                return this.apiItem['page'](params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res ? res.data.res.map(x => {
                            x.batchCode = x.batchList ? x.batchList.map(k => k.batchCode).join(',') : '';
                            return x;
                        }) : [];
                        this.searchParams.count = res.data.count;
                    }
                });
            }
        }
    };
</script>
